<template>
  <div class="chat-box" ref="chatBox">
    <div v-for="(msg, idx) in messages" :key="idx" class="message" :class="msg.role">
      <div class="message-content" v-html="getMessageHtml(msg.content)"></div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, onUpdated, ref, nextTick } from 'vue'
import { renderMarkdown } from '../utils/markdown.js'

const props = defineProps({
  messages: { type: Array, required: true }
})

const chatBox = ref(null)

onUpdated(() => {
  nextTick(() => {
    if (chatBox.value) {
      chatBox.value.scrollTop = chatBox.value.scrollHeight
    }
  })
})

const getMessageHtml = (content) => renderMarkdown(content)
</script>

<style scoped>
.chat-box {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 10px;
  border: 1px solid #ddd;
}

.message {
  margin-bottom: 12px;
  display: flex;
}

.message.user {
  justify-content: flex-end;
}

.message.ai {
  justify-content: flex-start;
}

.message-content {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 12px;
  line-height: 1.5;
  word-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.message.user .message-content {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #fff;
  text-align: right;
}

.message.ai .message-content {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  color: #333;
  text-align: left;
}

/* 高亮代码块 */
.hljs {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 8px;
  overflow-x: auto;
}
</style>
